<template>
	<view class="content-box">
		<image class="back" :src="$img('/storage/2021-09-03/613205a777e0b.png')" mode="widthFix"></image>
		<image class="ewm" :src="msg.qrcode" mode=""></image>
		<view class="button-box">
			<view class="yqm" v-if="msg.code">
				邀请码:{{msg.code}}
			</view>
			<view class="wxhy" @tap="fenxiang">
				分享给微信好友
			</view>
			<view class="bctpfx" @tap="bctp">
				保存图片分享
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: null
			}
		},
		onLoad() {
			this.get_data();
		},
		methods: {
			// 获取分享数据
			get_data() {
				this.$utils.request('/api/share/index', {}, res => {
					this.msg = res.data;
				})
			},
			// 分享
			fenxiang() {
				uni.setClipboardData({
					//准备复制的数据
					data: this.msg.code,
					success: function(res) {
						uni.showToast({
							title: '复制成功',
						});
					}
				})
			},
			bctp() {
				uni.previewImage({
					current: 0,
					urls: [this.msg.qrcode]
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #3AB0FA;
	}

	.content-box {
		background-color: #3AB0FA;
		min-height: 100vh;
		position: relative;
	}

	.back {
		width: 100%;
	}

	.ewm {
		position: absolute;
		width: 225rpx;
		height: 225rpx;
		background-color: white;
		z-index: 1;

		top: 578rpx;
		left: 259rpx;
	}

	.button-box {
		position: absolute;
		top: 578rpx;
		margin-top: 260rpx;
		width: 100%;

		>.yqm {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFD540;
			text-align: center;
		}

		>.wxhy {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3AB0FA;
			width: 569rpx;
			height: 105rpx;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 7rpx 0px rgba(79, 4, 181, 0.09);
			border-radius: 53rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto;
			margin-top: 33rpx;
		}

		>.bctpfx {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3AB0FA;

			width: 569rpx;
			height: 105rpx;
			background: #FFD540;
			box-shadow: 0px 8rpx 7rpx 0px rgba(79, 4, 181, 0.09);
			border-radius: 53rpx;

			display: flex;
			justify-content: center;
			align-items: center;
			margin: auto;
			margin-top: 30rpx;
		}
	}
</style>
